<template>
  <div
    class="header w-full h-[50px] flex justify-between items-center"
    :class="{ noBackground: noBackground }"
  >
    <template v-if="$slots.left">
      <div class="header-left w-[80px]">
        <slot name="left"></slot>
      </div>
    </template>
    <template v-else>
      <div class="header-left w-[80px]" @click="emit('back')">
        <div class="h-[49px] w-[42px] flex items-center justify-center">
          <van-icon name="arrow-left" />
        </div>
      </div>
    </template>
    <template v-if="$slots.title">
      <slot name="title"></slot>
    </template>
    <div
      v-else
      class="flex-1 w-0 text-center truncate text-[#000]"
      :class="{
        'text-[17px]': titleSize == 'default',
        'text-[19px]': titleSize == 'large'
      }"
    >
      {{ title }}
    </div>
    <div class="header-right w-[80px] h-[49px] flex justify-end items-center">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
withDefaults(
  defineProps<{
    title?: string;
    titleSize?: "default" | "large";
    noBackground?: boolean;
  }>(),
  {
    title: "",
    titleSize: "default",
    noBackground: false
  }
);
const emit = defineEmits(["back"]);
</script>
<style lang="scss" scoped>
.header {
  background: linear-gradient(to right, #5e91d4, #33d9e7);
  position: relative;
  overflow: hidden;
  .header-left {
    .van-icon {
      font-size: 22px;
      color: #000;
    }
  }
}
.noBackground {
  background: transparent;
}
</style>
